<template>
  <div class="div-dialog-wall" v-show="show"></div>
  <div class="div-dialog-wrapper" :class="$attrs.class" :style="$attrs.style" v-show="show">
    <div
      class="
        div-dialog-title-bar
        d-flex
        flex-row
        justify-content-between
        align-items-center
      "
    >
      <label class="lbl-dialog-title">{{ title }}</label>
      <i
        class="fa-solid fa-xmark"
        style="cursor: pointer"
        @click="closeClick"
      ></i>
    </div>

    <div class="div-dialog-content-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: false,
      default: "",
    },
    show: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  setup(_, { emit }) {
    const closeClick = () => {
      emit("close");
    };

    return {
      closeClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../App";
@import "../../CommonStyles";

.div-dialog-wall {
  position: absolute;
  left: 0;
  top: 70px;
  @include full-content-area-size;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: $z-index-hwmi-dialog-wall;
}

.div-dialog-wrapper {
  @include fixed-center;

  height: fit-content;
  background-color: white;
  //border: 4px solid rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.50);

  z-index: $z-index-hwmi-dialog-wrapper;
}

.div-dialog-title-bar {
  height: 32px;
  padding: 0 8px;
  background-color: rgb(243, 243, 243);

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.lbl-dialog-title {
  font-size: 15px;
  color: rgb(102, 102, 102);
}

.div-dialog-content-wrapper {
  max-height: 500px;
  overflow-y: auto;
}
</style>